<template>
  <div class="login-wrap">
    <div class="ms-login" v-loading.body="loading">
      <div class="ms-login-info">
        <div class="ms-title">清分平台</div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')" @change="passwordChange"></el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm('ruleForm')" :disabled="disabled">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import setRouter from './js/setRouter'
  import qs from 'qs'
  export default {
    data () {
      return {
        loading: false,
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', toggle: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', toggle: 'blur' }
          ]
        },
        disabled: true
      }
    },
    mounted () {
      this.Result()
    },
    methods: {
      Result () {
        let loginName = localStorage.getItem('loginName')
        if (loginName) {
          this.$router.push('/readme')
        }
      },
      submitForm (formName) {
        let that = this
        that.$refs[formName].validate((valid) => {
          if (valid) {
            that.loading = true
            let url = that.$api.login
            let params = {
              loginName: that.ruleForm.username, password: that.ruleForm.password, ansyncT: new Date().getTime()
            }
            that.$axios.post(url, qs.stringify(params)).then((res) => {
              console.log(res.data)
              if (res.data.msg.code === '20000') {
                let routerData = res.data.data.modules
                let appKey = res.data.data.appKey === '' ? 'super' : res.data.data.appKey
                let accountId = res.data.data.Id
                let companyId = res.data.data.companyId === '' ? 'super' : res.data.data.companyId
                localStorage.setItem('loginName', that.ruleForm.username) // 存储 用户信息
                localStorage.setItem('qfrouterData', JSON.stringify(routerData)) // 存储 路由
                localStorage.setItem('qfcompanyId', companyId) // 存储 companyId
                localStorage.setItem('qfaccountId', accountId) // 存储 账号id
                localStorage.setItem('appKey', appKey)  // 存储 appKey
                that.$router.addRoutes(setRouter(routerData)) // 渲染后台传送过来的路由
                that.$router.push('/readme')
              } else {
                that.$message({type: 'error', message: res.data.msg.message})
              }
              that.loading = false
            }).catch((err) => {
              if (err) throw err
              that.$message({type: 'error', message: '网络异常'})
              that.loading = false
            })
          } else {
            console.log('error')
          }
        })
      },
      passwordChange () {
        let that = this
        that.$refs.ruleForm.validate((valid) => {
          valid ? that.disabled = false : that.disabled = true
        })
      }
    }
  }
</script>
